<html>

    <head>
        <meta http-equiv="Content-Type" content="html/text；charset=UTF-8" >
    </head>

    <body  onload="notcompleted_todo()">
        <h1>待办事项清单</h1>
        <input id="text" type="text" placeholder="添加新事项">
        <input type="button" value="+"  onclick="add_list()">
        <br>
        <br>
        <input id="deltext" type="text" placeholder="删除事项">
        <input type="button" value="-"  onclick="del_todo()">
        <br>
        <br>
        <input type="button" value="完成事项" onclick="completed_todo()">
        <input type="button" value="未完成事项" onclick="notcompleted_todo()">
        <input type="button" value="所有事项" onclick="all_todo()">
        <div>
            <ul id="ul"></ul>
        </div>

   </body>

    <script>
    "use strict"
    // 添加待办事项
    function add_list(){
        var value=document.getElementById("text").value                                                                                                                           
        var url='/creat';
        var headers={
            "Content-Type":"application/x-www-form-urlencoded"
        }
        fetch(url,{
            method:'POST',
            body:"title="+value,
            headers:headers
        }).then(res=>res.json())
        .catch(error=>console.error('Error:',error))
        .then(function(response){
            all_todo();        
        });

    }
    
    //完成待办事项
    function with_completed(id){                                                                                                                         
        fetch('/completed'+'?id='+id )
        .then(res=>res.json())
        .then(function(myJson){
           location.reload()
            });
        }

    //删除事项
    function del_todo(){                                                                                                                         
        var value=parseInt(document.getElementById("deltext").value)                                                                                                                          
        var url='/del';
        var headers={
            "Content-Type":"application/x-www-form-urlencoded"
        }
        fetch(url,{
            method:'POST',
            body:"id="+value,
            headers:headers
        }).then(res=>res.json())
        .catch(error=>console.error('Error:',error))
        .then(function(response){
            all_todo();
        });
        }  
        
        

    //查询事项

    //1,所有事项 all
    function all_todo(){
        fetch("/alltodo"+'?completed=all') 
        .then(res=>res.json())
        .then(function(myJson){
            document.querySelector("#ul").innerHTML="";
            var todos=myJson.todos;
            for(var i=0; i<todos.length;i++){
            var todo='<li>'+todos[i]["id"]+' '+todos[i]["title"]+'</li>';
            document.querySelector("#ul").innerHTML+=todo
            }
        });   

    }

    //2,已完成事项  1
    function completed_todo(){
        fetch('/alltodo'+'?completed=1')
        .then(res=>res.json())
        .then(function(myJson){
            document.querySelector("#ul").innerHTML="";
            var todos=myJson.todos;
            for(var i=0; i<todos.length;i++){
            if(todos[i]["completed"]==true){
            var todo='<li>'+todos[i]["id"]+' '+todos[i]["title"]+'</li>';
            document.querySelector("#ul").innerHTML+=todo
         }
        }  
               
            });
    } 
    
    //3,未完成事项 no
    function notcompleted_todo(){
        fetch('/alltodo')
        .then(res=>res.json())
        .then(function(myJson){
            document.querySelector("#ul").innerHTML="";
            var todos=myJson.todos;
            for(var i=0; i<todos.length;i++){
            if(todos[i]["completed"]==false){
            var todo='<li><input type="checkbox" name="'+todos[i]["id"]+'" onchange="with_completed(this.name)">'+todos[i]["id"]+' '+todos[i]["title"]+'</li>';
            document.querySelector("#ul").innerHTML+=todo
          }
        }  
               
            });
    }    
    </script>

</html>
